﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格一</title>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>

<!--顶部-->
<header class="header left">
    <div class="left nav">
        <ul>
            <li ><i class="nav_1"></i><a href="index.html">总体概况</a> </li>
            <li><i class="nav_2"></i><a href="carContrl.html">视频监控</a> </li>
            <li><i class="nav_3"></i><a href="map.html">报警管理</a> </li>



        </ul>
    </div>
    <div class="header_center left">
        <h2><strong>智慧灯杆管理平台</strong></h2>
        <p class="color_font"><small>Comprehensive service platform for smart tourism</small></p>
    </div>
    <div class="right nav text_right">
        <ul> <li><i class="nav_7"></i><a href="static.html">环境监测</a> </li>
            <li><i class="nav_8"></i><a href="message.html">广告投放</a> </li>
            <li class="nav_active"><i class="nav_4"></i><a href="table2.html">灯杆管理</a> </li>
        </ul>
    </div>

</header>
<!--内容部分-->
<div  class="con left">
    <div class="con_div">
    <div class="con_div_text left">
        <div class="con_div_text01 left">
            <img src="img/info_1.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>灯杆总数</p>
                <p>40</p>
            </div>
        </div>
        <div class="con_div_text01 right">
            <img src="img/info_2.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>灯杆运行数</p>
                <p>35</p>
            </div>
        </div>
    </div>
    <div class="con_div_text left">
        <div class="con_div_text01 left">
            <img src="img/info_4.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>用电情况(千瓦时/天)</p>
                <p class="sky">300</p>
            </div>
        </div>
        <div class="con_div_text01 right">
            <img src="img/info_5.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>清洁能源占比(%)</p>
                <p class="sky">40</p>
            </div>
        </div>
    </div>
    <div class="con_div_text left">

        <div class="con_div_text01 left">
            <img src="img/info_6.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>报修情况</p>
                <p class="org">5</p>
            </div>
        </div>
        <div class="con_div_text01 right">
            <img src="img/info_7.png" class="left text01_img"/>
            <div class="left text01_div">
                <p>已完成数目</p>
                <p class="org">3</p>
            </div>
        </div>
    </div>
</div>
    <!--统计分析图-->

    <div class="static_top left">
        <i></i><span>统计分析一</span>
    </div>
    <div class="right div_any03">
        <div class="div_any_child01 left">
            <div class="div_any_title"><img src="img/title_4.png">太阳能电池板情况 </div>
            <p id="char3" class="p_chart"></p>
            <div class="char_table"><div class="table_p table_p01">
                <table>
                    <thead><tr>
                        <th>蓄电池编号</th>
                        <th>状态</th>
                        <th>电量（kwh）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr><td>A12340</td><td>正常</td><td>134.2</td></tr>
                    <tr><td>A12341</td><td>正常</td><td>109.8</td></tr>
                    <tr><td>A12342</td><td>缺电</td><td>0.0</td></tr>
                    <tr><td>A12343</td><td>正常</td><td>84.6</td></tr>
                    <tr><td>A12344</td><td>低电</td><td>34.3</td></tr>
                    </tbody>
                </table>
            </div></div>
        </div>
        <div class="div_any_child01 left">
            <div class="div_any_title"><img src="img/title_5.png">灯杆状态统计 </div>
            <p id="char4" class="p_chart"></p>
            <div class="char_table"><div class="table_p table_p01">
                <table>
                    <thead><tr>
                        <th>灯杆编号</th>
                        <th>状态</th>
                        <th>亮度等级（0-3）</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr><td>B12340</td><td>开启</td><td>1</td></tr>
                    <tr><td>B12341</td><td>开启</td><td>1</td></tr>
                    <tr><td>B12342</td><td>开启</td><td>2</td></tr>
                    <tr><td>B12343</td><td>开启</td><td>3</td></tr>
                    <tr><td>B12344</td><td>关闭</td><td>0</td></tr>
                    </tbody>
                </table>
            </div></div>
        </div>
    </div>


<!-- 删除下边的P标签，会使上边的JS定义的图表加载不出来 -->
    <div class="div_any" hidden>
        <div class="left div_any03" display=none>
            <div class="div_any_child01 left">
                
                
                <p id="char2" class="p_chart" ></p>


            </div>
            <div class="div_any_child01 left" >
                
                <p id="char1" class="p_chart" ></p>

            </div>
        </div>





        
    </div>
        
    </div>


</div>
<script src="js/jquery/jQuery-2.2.0.min.js"></script>
<script src="js/echarts-all.js"></script>
<script src="js/base.js"></script>
<script src="js/static.js"></script>

</body>
</html>
